<template>
	<view class="login">
		<view class="navbar">
			<view class="sys-bar" :style="{height:sysHeight}"></view>
			<view class="navbarh acea-row row-bottom">
				<view class="acea-row row-middle">
					<view class="iconfont icon-jiantou-zuo2" @click.stop="back"></view>
					<view class="title">登录账户</view>
				</view>
			</view>
		</view>
	
		<view class="acea-row row-middle row-center">
			<image class="logo" src="https://33ce93dc34c11522.rongyide.vip/uploads/attach/2023/12/20231203/6440bd294c4890024593f41ee72b40a0.png" mode="aspectFit"></image>
		</view>
		
		<view class="p30">
			<view class="acea-row row-middle mt-30 item">
				<view class="name">姓名</view>
				<view class="">
					<input type="text" v-model="real_name" placeholder="请输入姓名" placeholder-style="color:#999;font-size:26rpx;"/>
				</view>
			</view>
			<view class="acea-row row-middle mt-30 item">
				<view class="name">身份证号</view>
				<view class="">
					<input type="text" v-model="card_id" placeholder="请输入身份证号" placeholder-style="color:#999;font-size:26rpx;"/>
				</view>
			</view>
			
			<view class="btn" @click="getlogin">人脸识别一键登录</view>
			
			<view class="acea-row row-middle row-center" style="margin-top: 230rpx;">
				<view class="xian"></view>
				<view class="other">其他登录方式</view>
				<view class="xian"></view>
			</view>
			
			<view class="acea-row row-between row-middle" style="margin-top: 50rpx;padding: 0 60rpx;">
				<view class="acea-row row-middle row-column row-center">	
					<image class="suo" src="https://33ce93dc34c11522.rongyide.vip/uploads/attach/2023/12/20231203/247889555d841a72ac5cf8783be38d7e.png" mode="aspectFit"></image>
					<text style="color: #333; font-size: 26rpx;">密码</text>
				</view>
				<view class="acea-row row-middle row-column row-center">
					<image class="suo" src="https://33ce93dc34c11522.rongyide.vip/uploads/attach/2023/12/20231203/d1fc494b49569ceba3f1a6895b2de9a0.png" mode="aspectFit"></image>
					<text style="color: #333; font-size: 26rpx;">手势</text>
				</view>
			</view>
		</view>
		

		
	</view>
</template>

<script>
	import store from '../../store/index.js';
	import{
		login
	} from '@/api/api.js'
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		data() {
			return {
				sysHeight: sysHeight,
				real_name:'',
				card_id:'',
			};
		},
	
		methods:{
			back(){
				uni.navigateBack();
			},
			getlogin(){
				let that = this;
				if( !that.real_name ) return that.$util.Tips({ title : '请输入姓名' })
				if( !that.card_id ) return that.$util.Tips({ title : '请输入身份证号' })
				uni.showLoading({
					title:"登录中..."
				})
				login({ real_name:that.real_name , card_id:that.card_id }).then(res=>{
					uni.hideLoading()
					let data = res.data;
					that.$store.commit("LOGIN", {
						'token': data.token,
						'time': data.expires_time - this.$Cache.time()
					});
					that.$util.Tips({ title : res.msg },()=>{
						uni.reLaunch({
							url:'/pages/index/index'
						})
					})
				}).catch(err=>{
					uni.hideLoading()
					that.$util.Tips({ title : err })
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #ffffff !important;
	}
	.login{
		
		.navbar{
			width: 100%;
			height: 180rpx;
			background-image: url('https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/navbar-bg.png');
			background-size: 100% 100%;
			
			.navbarh{
				width: 100%;
				height: 88rpx;
				padding: 0 30rpx 10rpx 30rpx;
				
				.icon-jiantou-zuo2{
					color: #fff;
					font-size: 40rpx;
				}
				.title{
					font-size: 36rpx;
					color: #fff;
					margin-left: 20rpx;
				}
			}
		}
		
		.logo{
			width: 250rpx;
			height: 250rpx;
			margin-top: 50rpx;
		}
		
		.item{
			width: 690rpx;
			padding: 30rpx 0 10rpx 0;
			color: #010101;
			font-size: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
			
			.name{
				width: 180rpx;
			}
			input{
				width: 350rpx;
			}
		}
		
		.btn{
			width: 650rpx;
			height: 90rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 90rpx;
			background-color: #3165DD;
			color: #ffffff;
			margin: 50rpx auto;
		}
		.xian{
			width: 180rpx;
			border-bottom: 1rpx solid #DDDDDD;
		}
		.other{
			margin: 0 50rpx;
			color: #010101;
			font-size: 26rpx;
		}
		.suo{
			width: 70rpx;
			height: 70rpx;
			margin-bottom: 20rpx;
		}
		
	}
</style>
